<template>
  <div class="aside_box">
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @select="select"
      background-color="#6699cc"
      text-color="#fff"
      active-text-color="#78b0e9"
    >
      <el-menu-item index="1">
        <i class="el-icon-edit-outline"></i>
        <span>文章管理</span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-user"></i>
        <span slot="title">个人信息</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-message"></i>
        <span slot="title">公告</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-chat-dot-round"></i>
        <span slot="title">留言</span>
      </el-menu-item>
      <el-menu-item index="5">
        <i class="el-icon-chat-line-square"></i>
        <span slot="title">评论</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      path: {
        1: "/backend/article",
        2: "/backend/personal",
        3: "/backend/notice",
        4: "/backend/message",
        5: "/backend/comment",
      },
    }
  },
  methods: {
    select(key, keyPath) {
      this.$router.push(this.path[key])
    },
  },
}
</script>
<style lang="scss" scoped>
@import "./backend.scss";
.el-menu-item i {
  color: white;
}
.is-active {
  background: rgb(82, 122, 163) !important;
  i {
    color: #78b0e9;
  }
}
</style>
